<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英文关键词搜索</title>
    <style>
        *{
            box-sizing: border-box;
        }
        button{
            padding:0 20px;
            height:36px;
        }
        input{
            padding:0 5px;
            font-size: 18px;
            line-height: 36px;
            height:36px;
            vertical-align: top;
        }
        #resultPanel{
            margin-top:15px;
            border-top:1px dashed #ccc;
            padding-top:10px;
        }
        #resultPanel b{
            margin-right:5px;
        }
        #addBtn{
            float:right;
        }

        .modal{
            display: none;
            width:100%;
            height:100%;
            position: fixed;
            top:0;
            left:0;
            bottom:0;
            background: rgba(0,0,0,.5);
        }
        .modal-inner{
            position: absolute;
            top:30%;
            left:50%;
            margin-left:-135px;
            width:370px;
            background: white;
            border-radius: 1px;
            animation:.5s openIn ease-out;
        }
        .modal-close{
            padding: 10px 15px;
            cursor: pointer;
            color:gray;
            position: absolute;
            right:0;
            top:0;
        }
        .modal-title,.modal-content{
            padding:0 15px;
        }
        .modal-title{
            position: relative;
            border-bottom: 1px solid #cecece;
            padding: 10px 15px;
            font-size: 1.1em;
            font-weight: bold;
        }
        .modal-bottom{
            padding:17px;
            padding-top:0;
            text-align: right;
        }
        @keyframes openIn {
            from{
                transform: scale(0.1);
            }
            to{
                transform: scale(1);
            }
        }


        .modal-content b{
            width: 30%;
            text-align: right;
            display: inline-block;
            padding: 0 10px;
            line-height: 35px;
        }
        .modal-content input{
            width:68%;
        }

    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div>
        <input id="searchInput" type="text">
        <button id="searchBtn">搜索</button>
        <button id="addBtn">添加</button>
    </div>
    <div id="resultPanel">
        <p>

        </p>
    </div>

    <div id="modal" class="modal">
        <div class="modal-inner ">
            <div class="modal-title">添加字典
                    <div class="modal-close">×</div>
            </div>
            <div class="modal-content">
                <p id="errMsg"></p>
                <p>
                    <b>中文</b> <input type="text" id="addChineseInput">
                </p>
                <p>
                    <b>英文</b> <input type="text" id="addEnglishInput">
                </p>
                <p>
                   <b>英文缩写</b> <input type="text" id="addEnglishShortInput">
                </p>
            </div>
            <div class="modal-bottom">
                <button id="addSaveBtn">确定</button>
            </div>
        </div>
    
    </div>
    <script>
        var _p=null;
        var searchInput = $('#searchInput').get(0);
        var resultPanel=  $('#resultPanel').get(0);
        $('#searchInput').on('keydown',function(e){
            if(_p){
                clearTimeout(_p);
            }
            _p=setTimeout(function(){
                search()
            },300)
         
        })
        function search(){
            $.getJSON('/search',{
                word:searchInput.value
            },function(json){
                if(json.length){
                    resultPanel.innerHTML= json.map(function(item){
                        return '<p><b>'+item.chinese+':</b>'+item.english+','+item.english_short+'</p>'
                    }).join('')
                }else{
                    resultPanel.innerHTML= '暂无数据'
                }
            
            })
        }
        function onAddBtnClick(){
            $('#modal').show()
        }
        function onCloseModal(){
            $('#modal').hide()
        }
        function addSaveBtnClick(){
            var chinese = $('#addChineseInput').get(0).value;
            var english = $('#addEnglishInput').get(0).value;
            var english_short = $('#addEnglishShortInput').get(0).value;
            var englishReg = /^[a-z][a-zA-Z_]*$/ ;
            if(!/[\u4e00-\u9fa5]+/ig.test(chinese)){
                alert('中文格式不正确')
                return
            }

            // if(!englishReg.test(english)){
            //     alert('英文格式不正确')
            //     return
            // }
            // if(!english_short){
            //     if(!englishReg.test(english_short)){
            //         alert('英文缩写格式不正确')
            //         return
            //     }
            // }
          
            $.getJSON('/add',{
                chinese:chinese,
                english:english,
                english_short:english_short
            },function(json){
                
            });
            $('#modal').hide()
        }
        $('#searchBtn').on('click',search);
        $('#addBtn').on('click',onAddBtnClick);
        $('.modal-close').on('click',onCloseModal);
        $('#addSaveBtn').on('click',addSaveBtnClick)
    </script>
</body>
</html>
